<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/include/page.jsp"%>
<jsp:useBean id="usersPojo" class="com.wangsh.usersCenter.users.pojo.AUsers"/>
<c:set value="${requestScope.response.data.one}" var="users"/>
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<title>修改头像 - 用户中心</title>
		<%@ include file="/common/include/title.jsp"%>
	    <link rel="stylesheet" href="${rootPath }/common/resource/bootstrapvalidator/css/form-validation.css" rel="stylesheet">
	  	<script type="text/javascript" src="${rootPath }/common/resource/bootstrapvalidator/js/form-validation.js"></script>
	  	
	  	<script language="javascript" type="text/javascript" src="${rootPath }/common/resource/My97DatePicker/WdatePicker.js"></script>
	  	
	  	<!-- 上传头像 -->
		<link rel="stylesheet" type="text/css" href="${rootPath }/common/resource/webuploader/webuploader.css">
		<script type="text/javascript" src="${rootPath }/common/resource/webuploader/webuploader.js"></script>
		
	  <script type="text/javascript">
			$(function()
			{
				$list = $("#fileList") ; 
				var thumbnailWidth = 100 ; 
				var thumbnailHeight = 100 ; 
				
				// 初始化Web Uploader
				var uploader = WebUploader.create({
				    // 选完文件后，是否自动上传。
				     auto: false, 
				    // swf文件路径
				    swf: '${rootPath }/common/resource/webuploader/Uploader.swf',
				    // 文件接收服务端。
				    server: '${rootPath }/head/users/usersUpdateSubmit.htm?operType=updatePhoto',
				    // 选择文件的按钮。可选。
				    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
				    pick: '#filePicker',
				    // 只允许选择图片文件。
				    accept: {
				        title: 'Images',
				        extensions: 'gif,jpg,jpeg,bmp,png',
				        mimeTypes: 'image/*'
				    }
				});
				
				
				
				// 当有文件添加进来的时候
				uploader.on( 'fileQueued', function( file ) {
				    var $li = $(
				            '<div id="' + file.id + '" class="file-item thumbnail">' +
				                '<img>' +
				                '<div class="info">' + file.name + '</div>' +
				            '</div>'
				            ),
				        $img = $li.find('img');
		
		
				    // $list为容器jQuery实例
				    $list.append( $li );
		
				    // 创建缩略图
				    // 如果为非图片文件，可以不用调用此方法。
				    // thumbnailWidth x thumbnailHeight 为 100 x 100
				    uploader.makeThumb( file, function( error, src ) {
				        if ( error ) {
				            $img.replaceWith('<span>不能预览</span>');
				            return;
				        }
		
				        $img.attr( 'src', src );
				    }, thumbnailWidth, thumbnailHeight );
				});
				
				$(".radius").on("click",function(){
					uploader.upload();
				})
				// 文件上传过程中创建进度条实时显示。
				uploader.on( 'uploadProgress', function( file, percentage ) {
				    var $li = $( '#'+file.id ),
				        $percent = $li.find('.progress span');
		
				    // 避免重复创建
				    if ( !$percent.length ) {
				        $percent = $('<p class="progress"><span></span></p>')
				                .appendTo( $li )
				                .find('span');
				    }
		
				    $percent.css( 'width', percentage * 100 + '%' );
				});
		
				// 文件上传成功，给item添加成功class, 用样式标记上传成功。
				uploader.on( 'uploadSuccess', function( file ) {
				    $( '#'+file.id ).addClass('upload-state-done');
				});
		
				// 文件上传失败，显示上传出错。
				uploader.on( 'uploadError', function( file ) {
				    var $li = $( '#'+file.id ),
				        $error = $li.find('div.error');
		
				    // 避免重复创建
				    if ( !$error.length ) {
				        $error = $('<div class="error"></div>').appendTo( $li );
				    }
		
				    $error.text('上传失败');
				});
		
				// 完成上传完了，成功或者失败，先删除进度条。
				uploader.on( 'uploadComplete', function( file ) {
				    $( '#'+file.id ).find('.progress').remove();
				});
			});
		</script>
	</head>
	<body>
		<%@ include file="/common/include/header.jsp"%>
		<!-- 网页的主体 -->
		<div class="container">
			<div class="col-md-8 col-sm-10">
			<%-- action="${rootPath }/head/users/usersUpdateSubmit.htm" --%>
				<form id="form" method="post"  enctype="multipart/form-data"  class="form-horizontal" >
					<input type="hidden" name="operType" value="${param.operType }">
	
					<h2
						class="col-sm-10 col-sm-offset-1 form-signin-heading text-center">修改头像</h2>
					<div class="form-group">
						<label for="email" class="col-sm-3 control-label">邮箱</label>
						<div class="col-sm-5">
							${users.email }
						</div>
					</div>
					<div class="form-group">
						<label for="photo" class="col-sm-3 control-label">头像:</label>
						<div class="col-sm-8">
							<!--dom结构部分-->
							<div id="uploader-demo">
							    <!--用来存放item-->
							    <div id="fileList" class="uploader-list"></div>
							    <div id="filePicker">选择图片</div>
							</div>
						</div>
					</div>
					<div class="form-group">
						<label for="photo" class="col-sm-2 control-label">头像:</label>
						<div class="col-sm-8">
								<c:choose>
									<c:when test="${users.photoPath != null && users.photoPath != ''}">
										<a target="_blank" href="${requestScope.websiteFileUrl }${users.photoPath }">
										<img src="${requestScope.websiteFileUrl }${users.photoPath }" 
											class="img-fluid rounded mx-auto" width="200" height="200">
										</a>	
									</c:when>
									<c:otherwise>
										<a target="_blank" href="${rootPath}/img/no_pic.png">										
										<img src="${rootPath}/img/no_pic.png" 
											class="img-fluid rounded mx-auto" width="200" height="200">
										</a>
									</c:otherwise>
								</c:choose>
						</div>
					</div>
						<input class="btn btn-primary radius mt-20" type="submit" style="width: 100px;font-size: 16px;height: 40px;" value="提交">
				</form>
			</div>
		</div>
		<%@ include file="/common/include/footer.jsp"%>
	</body>
</html>